<template>
  <div class="main">
    <van-nav-bar
      title="我的订单"
      @click-left="goback"
      left-text="返回"
      left-arrow
      :border="false"
    >
      <template #right>
        <van-icon name="ellipsis" size="25" />
      </template>
    </van-nav-bar>

    <van-cell-group>
      <van-search :disabled="true" placeholder="请输入订单编号/订单名称" />
    </van-cell-group>
    <van-tabs v-model="active" lazy-render animated>
      <van-tab style="background: #f8f8f8" title="全部" name="a">
        <div v-if="allOrder.length ? show3 == true : false">
          <div class="con_2" v-for="item in allOrder" :key="item.orderID">
            <van-cell class="con_title">
              <template #title>
                {{ item.newTime }}
              </template>
              <template #right-icon>
                <van-tag
                  v-if="item.orderState === '已完成'"
                  color="#7232dd"
                  plain
                >
                  {{ item.orderState }}
                </van-tag>
                <van-tag
                  v-else-if="item.orderState === '未评价'"
                  type="warning"
                  plain
                >
                  {{ item.orderState }}
                </van-tag>
                <van-tag
                  v-else-if="item.orderState === '待收货'"
                  plain
                  hairline
                  type="primary"
                >
                  {{ item.orderState }}
                </van-tag>
              </template>
            </van-cell>
            <router-link
              :to="{ name: 'details', params: { gid: item.GoodsID } }"
            >
              <van-card
                :num="item.goodsNum"
                :price="item.GoodsPrice + '.00'"
                :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
                :title="item.GoodName"
                :thumb="item.GoodsPic"
              >
                <template #tags>
                  <van-tag plain type="danger">精品好货</van-tag>
                </template>
                <!-- <template #footer>
              <van-button size="mini" @click="selectMorn(item.OrderNum)"
                >查看更多</van-button
              >
            </template> -->
              </van-card>
            </router-link>
            <van-cell class="con_title_2">
              <template #title>
                订单编号：<van-tag plain type="primary">{{
                  item.OrderNum
                }}</van-tag>
              </template>
              <template #right-icon>
                <router-link
                  v-if="item.orderState === '已完成'"
                  :to="{
                    name: 'WriteEvaluation',
                    params: { oid: item.orderID },
                  }"
                >
                  <van-button
                    style="width: 110px; height: 35px"
                    round
                    color="#7232dd"
                    plain
                  >
                    找相似
                  </van-button>
                </router-link>
                <router-link
                  v-else-if="item.orderState === '未评价'"
                  :to="{
                    name: 'WriteEvaluation',
                    params: { oid: item.orderID },
                  }"
                >
                  <van-button
                    style="width: 110px; height: 35px"
                    round
                    plain
                    hairline
                    type="info"
                  >
                    前往评价
                  </van-button>
                </router-link>
                <router-link
                  v-else-if="item.orderState === '待收货'"
                  :to="{
                    name: 'WriteEvaluation',
                    params: { oid: item.orderID },
                  }"
                >
                  <van-button
                    style="width: 110px; height: 35px"
                    round
                    color="linear-gradient(to right, #ff6034, #ee0a24)"
                  >
                    确认收货
                  </van-button>
                </router-link>
              </template>
            </van-cell>
          </div>

          <!-- 代付款 -->
          <div class="con_2" v-for="item in recdeList" :key="item.recID">
            <van-cell class="con_title" title="京东自营">
              <template #right-icon>
                <van-tag type="warning">等待付款</van-tag>
              </template>
            </van-cell>
            <van-card
              :num="item.goodsNum"
              :price="item.GoodsPrice + '.00'"
              :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
              :title="item.GoodName"
              :thumb="item.GoodsPic"
            >
              <template #tags>
                <van-tag plain type="danger">精品好货</van-tag>
              </template>
              <template #footer>
                <van-button size="mini" @click="selectMorn(item.OrderNum)"
                  >查看更多</van-button
                >
              </template>
            </van-card>
            <van-cell class="con_title_2">
              <template #title>
                <span class="custom-title"
                  ><van-icon class="clock" name="clock-o" />
                </span>
                <span style="line-height: 34px; display: block"
                  >订单会在30分钟后自动取消</span
                >
              </template>
              <template #right-icon>
                <van-button
                  style="width: 110px; height: 35px"
                  round
                  @click="goPay(item.OrderNum)"
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
                >
                  去支付
                </van-button>
              </template>
            </van-cell>
          </div>
          <!-- 代付款 -->
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/d29c1a60c5f03453.png"
          description="您暂时没有相关订单！"
        />
      </van-tab>
      <van-tab style="background: #f8f8f8" name="b">
        <template #title>
          <!-- <van-badge :content="recList.length"/> -->

          <van-badge
            class="bage tile"
            v-if="recdeList.length ? show == true : false"
            :content="recdeList.length"
          />
          <van-badge class="bage" v-else />
          未付款
        </template>
        <div v-if="recdeList.length ? show == true : false">
          <div class="con_2" v-for="item in recdeList" :key="item.recID">
            <van-cell class="con_title" title="京东自营">
              <template #right-icon>
                <van-tag type="warning">等待付款</van-tag>
              </template>
            </van-cell>
            <van-card
              :num="item.goodsNum"
              :price="item.GoodsPrice + '.00'"
              :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
              :title="item.GoodName"
              :thumb="item.GoodsPic"
            >
              <template #tags>
                <van-tag plain type="danger">精品好货</van-tag>
              </template>
              <template #footer>
                <van-button size="mini" @click="selectMorn(item.OrderNum)"
                  >查看更多</van-button
                >
              </template>
            </van-card>
            <van-cell class="con_title_2">
              <template #title>
                <span class="custom-title"
                  ><van-icon class="clock" name="clock-o" />
                </span>
                <span style="line-height: 34px; display: block"
                  >订单会在30分钟后自动取消</span
                >
              </template>
              <template #right-icon>
                <van-button
                  style="width: 110px; height: 35px"
                  round
                  @click="goPay(item)"
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
                >
                  去支付
                </van-button>
              </template>
            </van-cell>
          </div>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/d29c1a60c5f03453.png"
          description="您暂时没有相关订单！"
        />
      </van-tab>
      <van-tab style="background: #f8f8f8" title="待发货" name="e">
        <template #title>
          <!-- <van-badge :content="recList.length"/> -->

          <van-badge
            class="bage tile"
            v-if="shipped.length ? show5 == true : false"
            :content="shipped.length"
          />
          <van-badge class="bage" v-else />
          待发货
        </template>
        <div v-if="shipped.length ? show5 == true : false">
          <div class="con_2" v-for="item in shipped" :key="item.orderID">
            <van-cell class="con_title">
              <template #title>
                <van-tag plain type="primary">{{ item.newTime }}</van-tag>
              </template>
              <template #right-icon>
                <van-tag color="#7232dd" plain>{{ item.orderState }}</van-tag>
              </template>
            </van-cell>
            <van-card
              :num="item.goodsNum"
              :price="item.GoodsPrice + '.00'"
              :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
              :title="item.GoodName"
              :thumb="item.GoodsPic"
            >
              <template #tags>
                <van-tag plain type="danger">精品好货</van-tag>
              </template>
              <!-- <template #footer>
              <van-button size="mini" @click="selectMorn(item.OrderNum)"
                >查看更多</van-button
              >
            </template> -->
            </van-card>

            <van-cell class="con_title_2">
              <template #title>
                订单编号：<van-tag plain type="primary">{{
                  item.OrderNum
                }}</van-tag>
              </template>
              <template #right-icon>
                <van-button
                  style="width: 90px; height: 35px"
                  round
                  @click="gotoDetals(item.OrderNum)"
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
                >
                  查看详情
                </van-button>
              </template>
            </van-cell>
          </div>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/d29c1a60c5f03453.png"
          description="您暂时没有相关订单！"
        />
      </van-tab>
      <van-tab style="background: #f8f8f8" title="待收货" name="c">
        <template #title>
          <!-- <van-badge :content="recList.length"/> -->

          <van-badge
            class="bage tile"
            v-if="delivery.length ? show1 == true : false"
            :content="delivery.length"
          />
          <van-badge class="bage" v-else />
          待收货
        </template>
        <div v-if="delivery.length ? show1 == true : false">
          <div
            class="con_2"
            v-for="item in delivery"
            :key="item.orderID"
            @click.self="gotoDetals(item.OrderNum)"
          >
            <van-cell class="con_title">
              <template #title>
                <van-tag plain type="primary">{{ item.newTime }}</van-tag>
              </template>
              <template #right-icon>
                <van-tag color="#7232dd" plain>{{ item.orderState }}</van-tag>
              </template>
            </van-cell>
            <van-card
              :num="item.goodsNum"
              :price="item.GoodsPrice + '.00'"
              :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
              :title="item.GoodName"
              :thumb="item.GoodsPic"
            >
              <template #tags>
                <van-tag plain type="danger">精品好货</van-tag>
              </template>
              <!-- <template #footer>
              <van-button size="mini" @click="selectMorn(item.OrderNum)"
                >查看更多</van-button
              >
            </template> -->
            </van-card>

            <van-cell class="con_title_2">
              <template #title>
                订单编号：<van-tag plain type="primary">{{
                  item.OrderNum
                }}</van-tag>
              </template>
              <template #right-icon>
                <van-button
                  style="width: 90px; height: 35px; margin-right: 10px"
                  round
                  type="default"
                  @click.self="goLogistics(item)"
                  >物流信息</van-button
                >
                <van-button
                  style="width: 90px; height: 35px"
                  round
                  @click="goOrder(item)"
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
                >
                  确认收货
                </van-button>
              </template>
            </van-cell>
          </div>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/d29c1a60c5f03453.png"
          description="您暂时没有相关订单！"
        />
      </van-tab>
      <van-tab style="background: #f8f8f8" title="待评价" name="d">
        <template #title>
          <!-- <van-badge :content="recList.length"/> -->

          <van-badge
            class="bage tile"
            v-if="Evaluated.length ? show2 == true : false"
            :content="Evaluated.length"
          />
          <van-badge class="bage" v-else />
          待评价
        </template>
        <div v-if="Evaluated.length ? show2 == true : false">
          <div class="con_2" v-for="item in Evaluated" :key="item.orderID">
            <van-cell class="con_title">
              <template #title>
                <van-tag plain type="primary">{{ item.newTime }}</van-tag>
              </template>
              <template #right-icon>
                <van-tag color="#7232dd" plain>{{ item.orderState }}</van-tag>
              </template>
            </van-cell>
            <van-card
              :num="item.goodsNum"
              :price="item.GoodsPrice + '.00'"
              :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
              :title="item.GoodName"
              :thumb="item.GoodsPic"
            >
              <template #tags>
                <van-tag plain type="danger">精品好货</van-tag>
              </template>
              <!-- <template #footer>
              <van-button size="mini" @click="selectMorn(item.OrderNum)"
                >查看更多</van-button
              >
            </template> -->
            </van-card>
            <van-cell class="con_title_2">
              <template #title>
                订单编号：<van-tag plain type="primary">{{
                  item.OrderNum
                }}</van-tag>
              </template>
              <template #right-icon>
                <router-link
                  :to="{
                    name: 'WriteEvaluation',
                    params: { oid: item.orderID },
                  }"
                >
                  <van-button
                    style="width: 110px; height: 35px"
                    round
                    color="linear-gradient(to right, #ff6034, #ee0a24)"
                  >
                    立即评价
                  </van-button>
                </router-link>
              </template>
            </van-cell>
          </div>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/d29c1a60c5f03453.png"
          description="您暂时没有相关订单！"
        />
      </van-tab>

      <van-tab style="background: #f8f8f8" title="已完成" name="f">
        <div v-if="CompletedList.length ? show4 == true : false">
          <div class="con_2" v-for="item in CompletedList" :key="item.orderID">
            <van-cell class="con_title">
              <template #title>
                {{ item.newTime }}
              </template>
              <template #right-icon>
                <van-tag type="success" plain>
                  {{ item.orderState }}
                </van-tag>
              </template>
            </van-cell>
            <router-link
              :to="{ name: 'details', params: { gid: item.GoodsID } }"
            >
              <van-card
                :num="item.goodsNum"
                :price="item.GoodsPrice + '.00'"
                :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
                :title="item.GoodName"
                :thumb="item.GoodsPic"
              >
                <template #tags>
                  <van-tag plain type="danger">精品好货</van-tag>
                </template>
                <!-- <template #footer>
              <van-button size="mini" @click="selectMorn(item.OrderNum)"
                >查看更多</van-button
              >
            </template> -->
              </van-card>
            </router-link>
            <van-cell class="con_title_2">
              <template #title>
                订单编号：<van-tag plain type="primary">{{
                  item.OrderNum
                }}</van-tag>
              </template>
              <template #right-icon>
                <van-button
                  style="width: 110px; height: 35px"
                  round
                  color="#7232dd"
                  plain
                >
                  找相似
                </van-button>
              </template>
            </van-cell>
          </div>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/d29c1a60c5f03453.png"
          description="您暂时没有相关订单！"
        />
      </van-tab>
      <van-tab style="background: #f8f8f8" title="退款/售后" name="g"
        >内容 5</van-tab
      >
      <van-tab style="background: #f8f8f8" title="我的优惠券" name="h"
        >内容 6</van-tab
      >
    </van-tabs>
    <!-- 弹出层 -->
    <van-popup
      @close="proClose"
      closeable
      close-icon="close"
      v-model="proShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="probox">
        <img
          src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/okgif.gif"
          alt=""
        />
        <h4>交易完成!</h4>
      </div>
      <div style="text-align: center">
        <router-link
          :to="{ name: 'WriteEvaluation', params: { oid: orderID } }"
        >
          <van-button style="width: 150px" color="#7232dd" plain
            >立即评价</van-button
          >
        </router-link>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { setItem, getItem, removeItem } from "../utils/storage";

export default {
  data() {
    return {
      active: "a",
      recdeList: [],
      show: true,
      show1: true,
      show2: true,
      show3: true,
      show4: true,
      show5: true,

      delivery: [],
      shipped: [],
      isShow: true,
      proShow: false,
      Evaluated: [],
      allOrder: [],
      CompletedList: [],
      OrderNum: 0,
      orderid: 0,
      form: {
        OrderNum: "",
        start_status1: "",
        start_status_desc1: "",
        icon: "el-icon-s-cooperation",
        newTime: "",
      },
      goodsName: "",
      goodspic: "",
    };
  },
  created() {
    this.proShow = false;
    this.getReceived();
    this.getTakedelivery();
    this.TobeEvaluated();
    this.getAllordr();
    this.Tobeshipped();
  },
  activated() {
    this.proShow = false;
    this.TobeEvaluated();
    this.getAllordr();

    this.getReceived();
    this.getTakedelivery();
    this.Tobeshipped();
  },
  methods: {
    gotoDetals(item) {
      this.$store.commit("setOrdersNum", item);
      this.$router.push("/OrderDetailsNow");
    },
    async goLogistics(item) {
      console.log(item);
      const { data: res } = await this.$http.get("GetLocation", {
        params: { num: item.OrderNum },
      });
      if (res.status === 200) {
        let data = {
          StartingPoint: res.Start,
          EndPoint: res.End,
        };
        this.$store.commit("setJingwei", data);
        this.$store.commit("setOrdersNum", item.OrderNum);
        this.$store.commit("setOrdersPic", item.GoodsPic);
      }

      this.$router.push("/LogisticsInfo");
    },
    goback() {
      this.$router.push("/myinfo");
    },
    goPay(item) {
      this.$store.commit("setTotol", item.GoodsPrice);
      this.$store.commit("setOrderNum", item.OrderNum);

      this.$router.push("/newPay");
    },
    getview(to, from) {
      this.active = this.$route.params.acid;
    },
    selectMorn(val) {
      this.$store.commit("setOrderNum", val);
      this.$router.push("/Orderdetails");
    },
    async getReceived() {
      var dt = new Date();
      var mm = parseInt(dt.getMinutes());
      const { data: res } = await this.$http.get("getReceived", {
        params: { id: this.emailLogin[0].userID },
      });

      this.recdeList = res.data;
    },
    async getTakedelivery() {
      //待付款信息获取
      var dt = new Date();
      var mm = parseInt(dt.getMinutes());
      const { data: res } = await this.$http.get("getTakedelivery", {
        params: { id: this.emailLogin[0].userID },
      });
      this.delivery = res.data;
    },
    async TobeEvaluated() {
      const { data: res } = await this.$http.get("TobeEvaluated", {
        params: { id: this.emailLogin[0].userID },
      });
      this.Evaluated = res.data;
    },
    async getAllordr() {
      const { data: res } = await this.$http.get("getAllorder", {
        params: { id: this.emailLogin[0].userID },
      });
      this.allOrder = res.data;
      this.$store.commit("setOrderCount", res.data.length);
      const { data: res1 } = await this.$http.get("getCompleted", {
        params: { id: this.emailLogin[0].userID },
      });
      this.CompletedList = res1.data;
    },
    //待发货
    async Tobeshipped() {
      const { data: res } = await this.$http.get("ToBeShipped", {
        params: { id: this.emailLogin[0].userID },
      });
      this.shipped = res.data;
    },
    goOrder(item) {
      this.$dialog
        .confirm({
          message: "请确认订单是否送达！",
        })
        .then(() => {
          console.log(item);
          this.goodsName = item.GoodName;
          this.goodspic = item.GoodsPic;

          this.orderid = item.orderID;
          this.form.OrderNum = item.OrderNum;
          this.form.start_status1 = "已签收 " + this.timeNow;
          this.form.start_status_desc1 = "快递已被本人签收。有疑问联系客服。";
          this.form.newTime = this.timeNow;
          this.$store.commit("setOrderID", item.orderID);
          this.$toast.loading({
            forbidClick: true,
            message: "请稍后...",
            loadingType: "spinner",
          });
          setTimeout(() => {
            this.$toast.clear();
            this.updateWuliu();
            this.updateMessagetip();

            //修改订单状态
            this.editOrderState(item.OrderNum);
            this.OrderNum = item.OrderNum;
          }, 1500);
        })
        .catch(() => {
          // on cancel
        });
    },
    //更新物流
    async updateWuliu() {
      const { data: res } = await this.$http.post(
        "UpdateLogisticsProgress",
        this.form
      );
      console.log(res);
    },
    //更新消息提示
    async updateMessagetip() {
      let data = {
        OrderNo: this.form.OrderNum,
        userID: this.emailLogin[0].userID,
        Time: this.timeNow,
        msg: "您的购买的" + this.goodsName + "已签收",
        title: "您的订单已签收",
        goodsPic: this.goodspic,
        tip: 1,
      };
      const { data: res } = await this.$http.post("UpdateMessageTips", data);
      console.log(res);
    },
    async editOrderState(oid) {
      this.proShow = true;
      let order = {
        orderState: "已完成",
        orderID: oid,
      };
      const { data: res } = await this.$http.post("editOrderState", order);
      if (res.status == 200) {
        this.getTakedelivery();
      }
    },
    async proClose() {
      let order = {
        orderState: "未评价",
        orderID: this.orderid,
      };
      const { data: res } = await this.$http.post("editOrderState", order);
      console.log(res);
      if (res.status === 200) {
        console.log("未评价");
        this.TobeEvaluated();
        this.getTakedelivery();
        //  window.localStorage.removeItem('orderID')
      }
    },
  },
  computed: {
    ...mapState(["time", "emailLogin", "recLis", "Takedelivery", "orderID"]),
    timeNow() {
      var date = new Date();

      var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)

      var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
      var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
      var currentFormatDate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      return currentFormatDate;
    },
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.getview(newVal, oldVal);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: #f8f8f8;
}
.con_2 {
  padding: 10px;
}
.con_title {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.van-card {
  margin-top: -1px;

  background: #fff;
}
.custom-title {
  line-height: 2.9rem;
}
.con_title_2 {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.van-count-down {
  line-height: 2rem;
}
.clock {
  float: left;
  margin-top: 10px;

  margin-right: 6px;
}
.tile {
  margin-left: 37px;
  margin-top: -4px;
}
.probox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5625rem;
  img {
    width: 5rem;
    height: 5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
}
</style>